import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
/*ant 组件*/
import {Menu, Icon, Switch, Button} from "antd"
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

//按钮组
export default class BtnGroup extends PureComponent {
    //选中了第几个；一共可选择的数量；按钮名称组
    state = {
        chose: this.props.chose || [],
        choseNum: this.props.choseNum || 1,
        items: this.props.items || [],
    }
    render(){
        let {items,chose} = this.state;
        return (
            <div className="btnGroup">
                {items.map((item,index)=>{
                    let type = "";
                    let event = ()=>{this.add(index)};
                    if(chose.indexOf(index) > -1){
                        type = "primary";
                        event = ()=>{this.remove(index)};
                    }
                    return <Button key={index} onClick={event} type={type}>{item}</Button>;
                })}
            </div>
        );
    }
    //点击事件
    add(index){
        let {choseNum} = this.props;
        if(1 == choseNum ){
            this.setState({"chose":[index]});
        }
        //多选时不能超过设置的
        if(this.state.chose.length >= this.state.choseNum)return;
        var arr = this.state.chose.slice();
        arr.push(index);
        this.setState({"chose":arr});
    }
    remove(index){
        let {choseNum} = this.props;
        //单选时不能取消
        if(choseNum == 1)return;

        var arr = this.state.chose.slice();
        var i = arr.indexOf(index);
        if (i > -1) {
            arr.splice(i, 1);
        }
        this.setState({"chose":arr});
    }
}